<template>
	<view>
		<u-navbar title="校园" :is-back="false" titleColor="#fff" :background="background"></u-navbar>
		<view class="wrap">
			<view class="u-tabs-box">
				
				<u-tabs-swiper activeColor="#2BC3C8" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 第1页 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view v-for="(item,index) in 10" :key="index">
						<view class="u-p-20" @click="toUrl1">
							<u-image src="../../static/1.jpg" height="280" border-radius="6"></u-image>
							<view class="u-m-t-20 u-line-1 weight">辅导员推荐</view>
							<view class="u-m-t-10 u-font-sm ztitle u-line-2">如何与舍友相处？如何玩转重庆？如何快速适应大学生活？</view>
						</view>
						<view class="u-p-20" @click="toUrl2">
							<u-image src="../../static/ss.jpg" height="280" border-radius="6"></u-image>
							<view class="u-m-t-20 u-line-1 weight">重大虎溪</view>
							<view class="u-m-t-10 u-font-sm ztitle u-line-2">重庆大学最美宿舍是怎么样的？</view>
						</view>
						<view class="u-p-20" @click="toUrl3">
							<u-image src="../../static/tsg.jpg" height="280" border-radius="6"></u-image>
							<view class="u-m-t-20 u-line-1 weight">CQU图书馆</view>
							<view class="u-m-t-10 u-font-sm ztitle u-line-2">教你玩转图书馆</view>
						</view>
						<view class="u-p-20" @click="toUrl4">
							<u-image src="../../static/cq.jpg" height="280" border-radius="6"></u-image>
							<view class="u-m-t-20 u-line-1 weight">重庆攻略</view>
							<view class="u-m-t-10 u-font-sm ztitle u-line-2">重庆哪里好玩？</view>
						</view>
						
						
						</view>
						<u-gap bgColor="#ededed" height="20"></u-gap>
						<u-back-top :scrollTop="scrollTop" :mode="modeTop" :bottom="bottomTop" :right="rightTop" :top="top"
			            :icon="iconTop" :custom-style="customStyle" :icon-style="iconStyleTop" :tips="tips">
		                 </u-back-top>
					</scroll-view>
					
				</swiper-item>
				<!-- 第2页 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="u-card-wrap">
							<u-card @click="click" @head-click="headClick" :title="title"  :thumb="thumb" :padding="padding" :border="border">
								<view class="" slot="body"> 
									
									<view class="u-body-item u-flex u-row-between u-p-b-0">
										<a target="_blank" 
										href="https://mp.weixin.qq.com/s?__biz=MzI5NzA1NTU0NA==&mid=2649761510&idx=1&sn=bc6f04a8926db2c52d17ecd627c39f36&chksm=f4be62b1c3c9eba71a2e6ef2ab81e11b1773400c6500149af164a81635cc8a70ab18c9ee0dae&mpshare=1&scene=23&srcid=0901im3xDPvO0hkUGhQbs7s6&sharer_sharetime=1630555110768&sharer_shareid=afddb2a189ad1c69af7761445de86f46#rd">
											<view class="u-body-item-title u-line-2">
												注意！大学生反诈宣传
											</view>
										</a>
										<image src="../../static/fanza.jpeg" ></image>
									</view>
									
									<view class="u-body-item u-flex u-row-between u-p-b-0">
										<a target="_blank" href="https://mp.weixin.qq.com/s/dgUMCPt_hQtzPcyr4d_90w">
											<view class="u-body-item-title u-line-2">
												原来虎溪有一个这么美的植物园
											</view>
										</a>
										<image src="../../static/640.jpg" ></image>
									</view>
									<view class="u-body-item u-flex u-row-between u-p-b-0">
										<a target="_blank" href="https://mp.weixin.qq.com/s?__biz=MzA5MTU2MTcwNw==&mid=2653077806&idx=1&sn=03cf12b2232424d33ce3a505a257404a&chksm=8baceaaabcdb63bc3fe33135ce2f30c139f9bb3d6d94f7b9b7940e7ac614daa30204df7b6942&mpshare=1&scene=23&srcid=0709FxFwdZDcjmFYzHG5qLzp&sharer_sharetime=1688870044301&sharer_shareid=5306b883ad10f322e13ece419cc5f3f5#rd">
											<view class="u-body-item-title u-line-2">
												玩转虎溪食堂
											</view>
										</a>
										<image src="../../static/shitang.jpg" ></image>
									</view>
									<view class="u-body-item u-flex u-row-between u-p-b-0">
										<a target="_blank" href="https://mp.weixin.qq.com/s?__biz=MzA5MTU2MTcwNw==&mid=2653083340&idx=1&sn=ba6278a80481ff0e218d1cc939b36f94&chksm=8bacfd48bcdb745e63682dadf52a0668a34c726f2afcc2073ba3793d451d490252574114f1d7&mpshare=1&scene=23&srcid=0709qSefhHWHIxhceHHFAIPl&sharer_sharetime=1688870083028&sharer_shareid=5306b883ad10f322e13ece419cc5f3f5#rd">
											<view class="u-body-item-title u-line-2">
												了解重大运动设施
				 							</view>
										</a>
										<image src="../../static/freshman6.jpg" ></image>
									</view>
								</view>
							</u-card>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 第3页 -->
				<swiper-item class="swiper-item"> 
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="wrap">
							<u-waterfall v-model="flowList" ref="uWaterfall">
								<template v-slot:left="{ leftList }">
									<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
										<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
										<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index" @click='play'></u-lazy-load>
										<view class="demo-title" >{{ item.title }}</view>
										<view class="demo-price">{{ item.price }}</view>
										
									</view>
								</template>
								<template v-slot:right="{ rightList }">
									<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
										<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index" @click='play1'></u-lazy-load>
										<view class="demo-title">{{ item.title }}</view>
										<view class="demo-price">{{ item.price }}</view>
									</view>
								</template>
							</u-waterfall>
							<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus1" @loadmore="addRandomData"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '欢迎CQU新生',

				thumb: '',
				padding: 50,
				bottomSlot: false,
				border: false,
				
				
				////////瀑布
				loadStatus1: 'loadmore',
				flowList: [],
				list1: [
					{
						price: '不来看看重庆最好的图书馆？',
						title: '重庆大学图书馆（虎溪）',
						
						image: '../../static/library.jpg'
					},
					{
						price: '重大校长倾力推荐',
						title: '重庆大学体育馆',
						
						image: '../../static/sport.jpg'
					},
					{
						price: '虎溪花园名不虚传',
						title: '重庆大学植物园',
						
						image: '../../static/plant.jpg'
					},
					{
						price: '风景美不胜收',
						title: '重庆大学云湖',
						
						image: '../../static/640.jpg'
					},
					{
						price: '生命在于运动',
						title: '重大运动会',
						
						image: '../../static/freshman6.jpg'
					},
					{
						price: '好好吃饭',
						title: '虎溪快乐食堂',
						
						image: '../../static/freshman5.png'
					},
					{
						price: '拍照必去',
						title: '奇怪的建筑',
						
						image: '../../static/clock.jpg'
					},
				],
				
				
				
				
				
				orderList: [[], [], [], []],
				dataList: [
					{
						id: 1,
						
					},
					{
						id: 2,
						
					},
					
				],
			background: {
				'background-image': 'linear-gradient(45deg, #2BC3C8, #84E7B9)'
			},
			// top
			scrollTop: 0,
			modeTop: 'circle',
			bottomTop: 200,
			rightTop: 40,
			top: 600,
			iconTop: 'arrow-up',
			iconStyleTop: {
				color: '#ffffff',
				fontSize: '30rpx'
			},
			customStyle: {
				backgroundColor: '#39CCCC',
				color: '#ffffff'
			},
			tips: '顶部',
				list: [
					{
						name: '在重大'
					},
					{
						name: '新生指南'
					},
					{
						name: '看重大'
					},
					
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore','loadmore','loadmore','loadmore'],
			}
			
		},
		onLoad() {
			this.addRandomData();
			// this.getOrderList(0);
			// this.getOrderList(1);
			// this.getOrderList(3);
		},
		onReachBottom() {
			this.loadStatus1 = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus1 = 'loadmore';
			}, 1000);
		},
		methods: {
			play(){
				console.log("视频播放1")
				fail: err => {					    console.error('Navigation failed:', err);					  }
				uni.navigateTo({
					url:"/pages/viedo/video1"
				})
				console.log("视频播放2")
			},
			play1(){
				uni.navigateTo({
					url: '/pages/WEB/WEB?url=' + 'https://www.bilibili.com/video/BV13z4y1J7XM/'
				})
			},
			//////////////////瀑布
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list1.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list1[index]));
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			
			
			toUrl1(){
				this.$common.navigateTo('/pages/object/objectList')
			},
			toUrl2(){
				this.$common.navigateTo('/pages/index/detail')
			},
			toUrl3(){
				this.$common.navigateTo('/pages/index/freshman1')
			},
			toUrl4(){
				this.$common.navigateTo('/pages/index/freshman2')
			},
			// reachBottom() {
			// 	// 此tab为空数据
			// 	if(this.current != 2) {
			// 		this.loadStatus.splice(this.current,1,"loading")
			// 		setTimeout(() => {
			// 			this.getOrderList(this.current);
			// 		}, 1200);
			// 	}
			// },
			// 页面数据
			// getOrderList(idx) {
			// 	for(let i = 0; i < 5; i++) {
			// 		let index = this.$u.random(0, this.dataList.length - 1);
			// 		let data = JSON.parse(JSON.stringify(this.dataList[index]));
			// 		data.id = this.$u.guid();
			// 		this.orderList[idx].push(data);
			// 	}
			// 	this.loadStatus.splice(this.current,1,"loadmore")
			// },
				
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				// this.getOrderList(index);
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			
			// 回到顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		}
	}
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
	///////////////瀑布
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-img-wrap {
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
	word-break: break-all;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 10rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
	
	
	//////////
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
	}
	.ztitle {
		color: #A5A5A5;
	}
	.weight{
		font-weight: 700;
	}
	a:link {
		color: black;
		text-decoration: none;
	}
	a:visited {
		color: black;
		text-decoration: none;
	}
	
	
	
	.u-card-wrap {
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 0rpx;
	}
		
	.u-body-item image {
		width: 200rpx;
		flex: 0 0 180rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 150rpx;
	}
</style>
